<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>获取图片信息</button>
    <button>设置图片信息</button>
    <hr/>
    <img xxx="one" title="电影" height="200" src="https://pic.maizuo.com/usr/movie/8c0b6266d51e9b1d20e80c61872eb1de.jpg" alt="加载失败啦">
</body>
<script>
    const btns = document.querySelectorAll("button");
    const img = document.querySelector("img");
    btns[0].onclick = function(){
        // 内置属性可以通过.的形式获取，自定义的属性无法通过该形式获取。
        console.log("src",img.src);
        console.log("title",img.title);
        console.log("height",img.height);
        console.log("alt",img.alt);
        console.log("xxx",img.xxx);
    }
    btns[1].onclick = function(){
        // 内置属性可以通过.形式修改，自定义的属性无法通过该形式修改
        img.xxx = "laxilaxilaxi";
        img.height+=10;
        img.src = "https://pic.maizuo.com/usr/movie/5315e8103dd09d47b5effd21a18f8f8e.jpg?x-oss-process=image/quality,Q_70"
    }
</script>
</html>